<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>23-flex布局实例 -实用的网络结构布局(扩展)</title>
<style type="text/css">
.flex {
	display: flex
}
.warp {
	flex-wrap: wrap
}
.row {
	flex-direction: row
}
.column {
	flex-direction: column
}
.jc-start {
	justify-content: flex-start
}
.jc-end {
	justify-content: flex-end
}
.jc-center {
	justify-content: center
}
.jc-sb {
	justify-content: space-between
}
.jc-sa {
	justify-content: space-around
}
.ai-c {
	align-items: center
}
.ai-strar {
	align-items: flex-start
}
.ai-end {
	align-items: flex-end
}
.ai-str {
	align-items: stretch
}
.ac-c {
	align-content: center
}
.ac-strat {
	align-content: flex-start
}
.ac-end {
	align-content: space-between
}
.ac-sb {
	align-content: space-between
}
.ac-sa {
	align-content: space-around
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.box {
	margin-left: auto;
	margin-right: auto;
}
.item {
	width: 33.3333%;
	font-size: 0;
}
.item img {
	width: 100%;
	height: auto;
	border-style: none;
}
</style>
</head>

<body>
<div class="box flex jc-sb warp ac-strat">
  <div class="item"><img src="images/01.jpg" alt=""/></div>
  <div class="item"><img src="images/02.jpg" alt=""/></div>
  <div class="item"><img src="images/03.jpg" alt=""/></div>
  <div class="item"><img src="images/04.jpg" alt=""/></div>
  <div class="item"><img src="images/05.jpg" alt=""/></div>
  <div class="item"><img src="images/06.jpg" alt=""/></div>
</div>
</body>
</html>
